<template>
	<div class="fenleiNav">
		<ul class="fenleiList">
			<li class="navBox"  v-for="item in fenleiList" :key="item.id" >
				<router-link   :to="`/fenlei/${item.path}?id=${item.id}`" active-class="active">
					<span class="fenlei_name">{{item.text}}</span>
				</router-link>
			</li>
		</ul>
	</div>
</template>

<script>
	export default {
		name: "fenleiNav",
		props: {
			fenleiList: {
				type: Array,
			}
		},
		data() {
			return {
				
				
			};
		},
		methods: {
			
		},
		
	}
</script>

<style scoped="scoped">
	.fenleiNav{
		position: fixed;
		left: 0;
		top: 0.88rem;
		
	}
	.fenleiNav .fenleiList {
		height: 6rem;
		background: #F7F7F7;
		display: flex;
		flex-direction: column;
		justify-content: space-around;
		overflow-x:scroll;
	}
	.fenleiNav .fenleiList .navBox {
		display: flex;
		font-size: 0.15rem;
		padding: 0.08rem;
		
	}

	.fenleiNav .fenleiList .navBox .fenlei_name {
		
	}
	.active{
		color: red;
	}
</style>
